<template>
  <div>
    <van-cell class="userCell" is-link center @click="cellClick">
      <!-- icon小图标 -->
      <template #icon>
        <i class="iconfont pr12" v-html="icon"></i>
      </template>
      <!-- 我的岗位 -->
      <template #title>
        <div class="title">
          {{ title }}
        </div>
      </template>
      <!--  -->
      <template #default>
        <div v-if="type === 'img'">
          <!-- 是图像显示图像 -->
          <img v-if="value" class="img" :src="$baseUrl + value" alt="" />
          <img v-else class="img" src="@/assets/logo.png" alt="" />
        </div>
        <!-- 否则显示文本 -->
        <div v-else class="value">
          {{ value }}
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'userCell',
  props: ['title', 'value', 'icon', 'type'],
  data () {
    return {}
  },
  methods: {
    cellClick () {
      this.$emit('click')
    }
  }
}
</script>

<style lang="less" scoped>
.pr12 {
  padding-right: 12px;
}
.title {
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #181a39;
  line-height: 20px;
  letter-spacing: 0px;
}
.value {
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: right;
  color: #5b5d75;
  line-height: 20px;
  letter-spacing: 0px;
}
.img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>
